<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ECharts</title>
    <link rel="stylesheet" href="/css/main.css" type="text/css">
</head>
<body>
<div id="container">
    <div id="main"></div>
</div>
</body>
</html>
<script src="/js/echarts.min.js"></script>
<script src="/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    let myChart = echarts.init(document.getElementById('main'));
    let option = {
        backgroundColor: '#080b30',
        textStyle: {
            color: '#fff',
            fontSize: 16
        },
        title: {
            text: 'TITLE',
            textStyle: {
                align: 'center',
                color: '#fff',
                fontSize: 20,
            },
            top: '3%',
            left: 'center',
        },
        legend: {
            color: ["#17B4FA", "#47D8BE", "#F9A589"],
            data: [],
            left: 'center',
            top: "8%",
            textStyle: {
                color: "#ffffff"
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                lineStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0,
                            color: 'rgba(0, 255, 233,0)'
                        }, {
                            offset: 0.5,
                            color: 'rgba(255, 255, 255,1)',
                        }, {
                            offset: 1,
                            color: 'rgba(0, 255, 233,0)'
                        }],
                        global: false
                    }
                },
            },
        },
        grid: {
            top: '15%',
            left: '5%',
            right: '5%',
            bottom: '15%',
            containLabel:true
        },
        xAxis: [{
            type: 'category',
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#9581F5'
                },
            },
            splitArea: {
                color: '#f00',
                lineStyle: {
                    color: '#f00'
                },
            },
            axisLabel: {
                color: '#fff',
                fontSize: 16
            },
            splitLine: {
                show: false
            },
            boundaryGap: false,
            data: ['8：00', '9:00', '10:00', '11:00', '12:00', '13:00'],

        }],
        yAxis: [{
            type: 'value',
            name: '单位:方',
            nameTextStyle: {
                color: '#fff',
                fontSize: 16
            },
            splitNumber: 4,
            splitLine: {
                show: true,
                lineStyle: {
                    color: 'rgba(255,255,255,0.1)'
                }
            },
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#9581F5'
                },
            },
            axisLabel: {
                show: true,
                margin: 20,
                textStyle: {
                    color: '#d1e6eb',
                    fontSize: 16
                },
            },
            axisTick: {
                show: true,
            },
        }],
        series: [{
            name: '',
            type: 'line',
            // smooth: true,
            showAllSymbol: true,
            symbol: 'circle',
            symbolSize: 25,
            lineStyle: {
                normal: {
                    color: "#6c50f3",
                    shadowColor: 'rgba(0, 0, 0, .3)',
                    shadowBlur: 0,
                    shadowOffsetY: 5,
                    shadowOffsetX: 5,
                },
            },
            label: {
                show: true,
                position: 'top',
                textStyle: {
                    color: '#6c50f3',
                }
            },
            itemStyle: {
                color: "#6c50f3",
                borderColor: "#fff",
                borderWidth: 3,
                shadowColor: 'rgba(0, 0, 0, .3)',
                shadowBlur: 0,
                shadowOffsetY: 2,
                shadowOffsetX: 2,
            },
            tooltip: {
                show: false
            },
            areaStyle: {
                normal: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(108,80,243,0.3)'
                    },
                        {
                            offset: 1,
                            color: 'rgba(108,80,243,0)'
                        }
                    ], false),
                    shadowColor: 'rgba(108,80,243, 0.9)',
                    shadowBlur: 20
                }
            },
            data: []
        }]
    };
    myChart.setOption(option);
    myChart.showLoading();
    $.ajax({
        type : "get",
        async : true,
        url : "/line/one/1",
        data : {},
        dataType : "json",
        success : function(result) {
            if (result.code == 200) {
                myChart.hideLoading();
                result.data.xAxis.forEach(function (item, index) {
                    option.xAxis[index].data = item.data;
                    option.xAxis[index].type = item.type;
                    if(item.name) {
                        option.xAxis[index].name = item.name;
                    }
                });

                result.data.yAxis.forEach(function (item, index) {
                    option.yAxis[index].type = item.type;
                    option.yAxis[index].name = item.name;
                    if(item.data){
                        option.yAxis[index].data = item.data;
                    }
                });

                result.data.series.forEach(function (item, index) {
                    option.series[index].data = item.data;
                    option.series[index].type = item.type;
                    option.series[index].name = item.name;
                });

                if (result.data.legend) {
                    option.legend.data = result.data.legend;
                }
                if (result.data.title) {
                    option.title.text = result.data.title;
                }
                myChart.setOption(option);
            }
        },
        error : function(errorMsg) {
            //请求失败时执行该函数
            alert("图表请求数据失败!");
            myChart.hideLoading();
        }
    });
</script>
